<template>
  <view v-if="show">
    <!-- 升级中 -->
    <Modal v-model:visible="upgradeRuning" catchtouchmove="true">
      <view class="upgrade-box">
        <view class="update-tips">固件升级中...</view>
        <image class="upgrade-img" :src="imgUrl + 'img_update.jpg'"></image>
        <view class="upgrade-title">{{ upgradeName }}</view>
        <view v-if="mcuStatus === 1 && upgradeRuning" class="upgrade-status">下载中</view>
        <view v-else-if="mcuStatus === 2" class="upgrade-status">传输中</view>
        <view v-else-if="mcuStatus === 3" class="upgrade-status">重启中</view>
      </view>
    </Modal>
    <!-- 升级成功 -->
    <Modal
      catchtouchmove="true"
      :visible="sucessVisible"
      description="升级成功"
      ok-text="我知道了"
      @ok="hideSucessFun"
    />
    <!-- 升级失败 -->
    <Modal catchtouchmove="true" :visible="failVisible" description="升级失败" ok-text="我知道了" @ok="hideFailFun" />
  </view>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import netconfig from '@/config/netconfig'

const imgUrl = netconfig.ASSETSPRE_ICONS

const props = defineProps<{
  show: boolean
  mcuStatus: number
  upgradeType: string
  upgradeName?: string
  upgrading?: boolean
  upgradeSucessProfile?: boolean
  upgradeFailProfile?: boolean
  from?: string
}>()
const emit = defineEmits<{
  (e: 'upgradeRuning', flag: boolean): void
  (e: 'upgradeSucess', flag: boolean): void
  (e: 'upgradeFail', flag: boolean): void
  (e: 'failProfile', flag: boolean): void
  (e: 'sucessProfile', flag: boolean): void
}>()

const upgradeRuning = ref(false) // 正在升级中
const upgradeSucess = ref(false) // 升级成功
const upgradeFail = ref(false) // 升级失败
const tempUpgrade = ref(0)
const sucessVisible = computed(() => upgradeSucess.value || props.upgradeSucessProfile)
const failVisible = computed(() => upgradeFail.value || props.upgradeFailProfile)

watch(
  () => props.mcuStatus,
  (mcuStatus) => {
    if (props.upgradeType === 'Profile') return
    if ([1, 2, 3].includes(mcuStatus)) {
      upgradeSucess.value = false
      upgradeFail.value = false
      upgradeRuning.value = true
    } else if (mcuStatus === 4) {
      upgradeFail.value = false
      upgradeRuning.value = false
      upgradeSucess.value = true
      emit('upgradeSucess', true)
    } else if (mcuStatus === 5) {
      upgradeSucess.value = false
      upgradeRuning.value = false
      upgradeFail.value = true
      emit('upgradeFail', true)
    } else {
      if (tempUpgrade.value === 0) {
        upgradeSucess.value = false
        upgradeFail.value = false
      }
      upgradeRuning.value = false
    }
    tempUpgrade.value = mcuStatus
  }
)
watch(
  () => props.upgrading,
  (upgrading) => {
    upgradeRuning.value = upgrading
  }
)
watch(
  () => upgradeRuning.value,
  (value) => {
    emit('upgradeRuning', value)
  }
)

/**
 * 关闭升级成功弹框
 */
function hideSucessFun() {
  upgradeSucess.value = false
  emit('sucessProfile', false)
}

/**
 * 关闭失败弹框
 */
function hideFailFun() {
  upgradeFail.value = false
  emit('failProfile', false)
}
</script>

<style lang="less">
// 升级
.upgrade-box {
  .update-tips {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
  }
  .upgrade-img {
    width: 256rpx;
    height: 256rpx;
    margin-top: 40rpx;
  }
}
</style>
